<template>
	<!-- 日期显示 -->
	<view class="week">
		<view class="week-box" v-for="(dateInfo, dateIndex) in weekOfMonth" :key="dateIndex">
			<view class="week-box-date" @tap="chooseDate(dateInfo)">
				<view :class="selectedWeek == dateInfo ? 'textActiveColor ' : 'week-box-date-text'">
					第{{
			numberToChinese(dateInfo) }}周</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		weekOfMonth: {
			type: [Number, String],
			default: 4
		},
		dateActiveColor: {  //日期选中背景颜色
			type: String,
			default: '#62AEF8'
		},
		// textActiveColor: { // 日期选中文字颜色
		// 	type: String,
		// 	default: '#FFFFFF'
		// },
		selectedWeek: {	   //选中的周
			type: [Number, String],
			default: 1
		},
	},
	computed: {

	},
	methods: {
		/* 数字转中文处理 */
		numberToChinese(number) {
			let chinese = ["一", "二", "三", "四", "五", "六"];
			return chinese[number - 1];
		},
		chooseDate(dateInfo) {
			this.$emit('chooseDate', dateInfo)
		}
	}
}
</script>

<style lang="scss">
.week {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;


	&-box {
		padding: 8rpx 10rpx;
		border-radius: 20px;
		display: flex;
		align-items: center;
		margin: 12px 0;

		&-date {

			&-text {
				color: $uni-color-primary;
				font-weight: 500;
				font-size: 22rpx;
				border: 2rpx solid #E7EBFF;
				padding: 10rpx 30rpx;
				border-radius: 12rpx;
			}

		}
	}


	.textActiveColor {
		color: $uni-bg-color;
		font-weight: 500;
		font-size: 22rpx;

		padding: 10rpx 30rpx;
		border-radius: 12rpx;
		background-color: $uni-color-primary;
	}


}
</style>